<template>
  <div class="Header">
    <div class="tag">
      <div>芯片农场数字孪生系统</div>
    </div>
    <div class="peg">
      <div class="leftPeg">
        <div>{{ time }}</div>
      </div>
      <div class="rightPeg">
        <div class="week">{{ week }}</div>
        <div class="date">{{ date }}</div>
      </div>
    </div>
    <div v-show="isLogo" class="logobox">
      <img src="@/assets/logo.png" alt="" />
    </div>

    <div v-show="!isLogo" class="flexLogo">
      <img src="@/assets/logo.png" alt="" />
    </div>
  </div>
</template>

<script setup>
  import { onMounted, ref, watch } from "vue"
  import { useRouter } from 'vue-router'
  import dayjs from "dayjs"
  import emitter from '@/utils/bus'

  let date = ref(null)
  let week = ref(null)
  let time = ref(null)
  let isLogo = ref(true)
  const router = useRouter()

  const getDate = () => {
    setInterval(() => {
      date.value = dayjs().format("YYYY-MM-DD")
      week.value = weekDay()
      time.value = dayjs().format("HH:mm:ss")
    }, 1000)
  }
  // 转换星期
  const weekDay = () => {
    const dayn = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
    let date = new Date()
    date = dayn[date.getDay()]
    return date
  }

  onMounted(() => {
    getDate()
  })

  watch(() => router.currentRoute.value, (newVal) => {
    if(newVal.path == '/' | newVal.path == '/homePage') {
      isLogo.value = true
    } else {
      isLogo.value = false
    }
  }, { immediate: true, deep:true })
</script>


<style lang="scss" scoped>
  .Header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 82px;
    z-index: 1;

    .tag {
      width: 100%;
      height: 82px;
      background-image: url("../../assets/header/img_title_bg.png");
      background-size: 100% 100%;

      div {
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: bold;
        font-size: 40px;
        color: #f3fff7;
        line-height: 41px;
        padding-top: 15px;
        letter-spacing: 4px;
        text-shadow: 0px 0px 5px #feab52;
        text-align: center;
        font-style: normal;
      }
    }

    .peg {
      position: fixed;
      top: 13px;
      left: 14px;
      right: 0;
      display: flex;
      font-size: 12px;
      color: #fff;
      letter-spacing: 2px;
      max-width: 19vw;
      white-space: nowrap;

      .leftPeg {
        font-family: SourceHanSansSC, SourceHanSansSC;
        font-weight: bold;
        font-size: 36px;
        color: #FFFFFF;
        line-height: 30px;
        text-shadow: 0px 0px 4px #EA6013;
        text-align: left;
        font-style: normal;
      }

      .rightPeg {
        padding-left: 14px;
      }
    }

    .logobox {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 540px;
      height: 171px;
      margin-top: -280px;
      margin-left: -270px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .flexLogo {
      position: fixed;
      top: 5px;
      right: 14px;
      width: 126px;
      height: 40px;

      img {
        width: 126px;
        height: 40px;
      }
    }
  }
</style>
